第08天 - PHP 列印出MySQL資料表的內容 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 8

自我挑戰組

HTML、 PHP CRUD 自我學習系列第 8 篇

第08天 - PHP 列印出MySQL資料表的內容

13th鐵人賽

kypss95120

2021-09-08 08:50:00

10921 瀏覽

分享至

今天來在網頁上顯示出 MySQL資料表的內容

1.連線到資料庫，首先要新建立1個.php檔(我取名為 db_cn.php)，並輸入以下程式碼
(因為只是單純連線用，不必引入任何東西，直接空白打上這些程式碼就好)
(然後寫 PHP語言的內容都要像這樣被 <問號PHP問號> 包起來)
(而PHP的變數名稱都用 $錢字號當開頭)

<?php
$db_host = "localhost";
$db_username = "root";
$db_password = "";
$database = "test_2021"; //因為是本地測試，改這一段就好(輸入你指定的資料庫名稱，我指定test_2021，如下圖)

$con = mysqli_connect("$db_host", "$db_username", "$db_password", "$database");

if(!$con)
{
	die("連線失敗!!!!!");

	$ssql = "set names utf8";
	mysqli_query($con,$ssql);
}
?>

上面程式碼【$database】的值，請輸入你想連線的資料庫名稱

2.新建立，或選擇1個想用來看成果的.php檔(我選擇之前建立的 Hello.php)
並在Hello.php的最上面加入下列程式碼

<?php 
include('db_cn.php');  //這是引入剛剛寫完，用來連線的.php
?>

3.來列印某資料表的內容(我選擇，資料庫test_2021 中的表staff )
程式碼整體會長這樣(下面範例有引入 Bootstrap的表格樣式)
其中比較重要的是的包法，這種包法，可以不用 "echo" 來做顯示。
(另外就是可以多看看 Bootstrap排版，來...幫助排版，
下面也有使用。div 帶有container的，讓整裝表格在網頁中間)

<?php 
include('db_cn.php');  //這是引入剛剛寫完，用來連線的.php
?>
<!DOCTYPE html>
<html lang="en">
<title>(網頁名稱)</title>
<head>
	
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

<?php 
	$query = "SELECT * FROM staff  "; //搜尋 *(全部欄位) ，從 表staff

	//mysqli_query << PHP 有很多種...指令(?) ，這是其中一個，我現在還都是學到甚麼用什麼，沒辦法自己看手冊，然後實驗+學習使用。 

	$query_run = mysqli_query($con,$query); //$con <<此變數來自引入的 db_cn.php
?>
<div class="container">

	<table class="table table-sm table-bordered"style="text-align:center;">
		<thead style="text-align:center;">
			<tr style="text-align:center;">
				<th>檔案類別</th>
				<th>會員姓名</th>
				<th>會員等級</th>
			</tr>
		</thead>

		<tbody>
			<!-- 大括號的上、下半部分 分別用 PHP 拆開 ，這樣中間就可以純用HTML語法-->
			<?php
				if(mysqli_num_rows($query_run) > 0)
				{
					foreach($query_run as $row)
					{
			?>
							<tr>
								<!-- $row['(輸入資料表的欄位名稱)'];  <<用雙引號也行 -->
								<td><?php echo $row['staff_id']; ?></td> 
								<td><?php echo $row['staff_name']; ?></td> 
								<td><?php echo $row['staff_role']; ?></td>
							</tr>
			<?php
				  }
				}
			?>
		</tbody>
	</body>

</div>

<!--BOOTSTRAP的東西------------------------------------------------------------------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</html>

成果長這樣